
<template>
  <div class="roles">
    <el-card class="el-card">
      <el-button type="primary" @click="rolesBtn">添加角色</el-button>
      <el-table :data="tableData" border class="el-table" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div v-for="(v, i) in scope.row.children" :key="i">
              <el-row>
                <el-col :span="6">
                  <el-tag closable effect="dark" @click="delRights(scope.row.id,v.id)"> {{ v.authName }} </el-tag>
                </el-col>
                <el-col :span="18">
                  <el-row v-for="(vv, ii) in v.children" :key="ii" @click="delRights(scope.row.id,vv.id)">
                    <el-col :span="4">
                      <el-tag closable effect="dark" type="success"
                        >{{ vv.authName }}
                      </el-tag>
                    </el-col>
                    <el-col :span="20">
                      <el-tag
                        closable
                        effect="dark"
                        type="warning"
                        v-for="(vvv, iii) in vv.children"
                        :key="iii"
                        @click="delRights(scope.row.id,vvv.id)"
                      >
                        {{ vvv.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleEdit(scope.row.id)"
              icon="el-icon-edit"
              size="mini"
              >编辑</el-button
            >

            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="delUser(scope.row)"
              size="mini"
              >删除</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="mini"
              @click="RoleDesc(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加角色-->
      <el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="rolesAdd">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑角色-->
      <el-dialog title="编辑角色" :visible.sync="dialogVisible1" width="30%">
        <el-form
          :model="ruleForm1"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm1.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm1.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="rolesEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 权限 -->
      <el-dialog title="分配权限" :visible.sync="dialogVisible2" width="50%">
        <el-tree
          ref="refTree"
          :data="data1"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="defaultChecked"
          :props="defaultProps"
        >
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="roleDescOk">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getRoles,
  addRoles,
  delRoles,
  byidRoles,
  editRoles,
} from "../../http/roles";
import { getrights, editrights,deletrights } from "../../http/right";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      ruleForm: {
        roleName: "",
        roleDesc: "",
      },
      ruleForm1: {
        id: "",
        roleName: "",
        roleDesc: "",
      },
      // 权限id
      currteId: "",
      //  校验
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      data1: [],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      defaultChecked: [],
    };
  },
  created() {
    this.getRoles();
  },
  mounted() {},
  methods: {
    // 渲染页面
    async getRoles() {
      let res = await getRoles();
      console.log(res);
      if (res.meta.status == 200) {
        this.$message({
          message: "获取成功",
          type: "success",
        });
        this.tableData = res.data;
      }
    },
    // 添加角色按钮
    rolesBtn() {
      this.dialogVisible = true;
    },
    // 添加角色
    async rolesAdd() {
      let res = await addRoles(this.ruleForm);
      if (res.meta.status == 200) {
        this.$message({
          message: "创建成功",
          type: "success",
        });
        this.getRoles();
        this.dialogVisible = false;
      }
    },
    // 删除角色
    delUser(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delRoles({ id: val.id }).then((res) => {
            console.log(res);
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getRoles();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑回填
    async handleEdit(id) {
      this.dialogVisible1 = true;
      let res = await byidRoles(id);
      console.log(res);
      this.ruleForm1.id = id;
      this.ruleForm1.roleName = res.data.roleName;
      this.ruleForm1.roleDesc = res.data.roleDesc;
    },
    // 编辑成功
    async rolesEdit() {
      console.log(this.ruleForm1);
      let { id, roleName, roleDesc } = this.ruleForm1;
      let res = await editRoles({ id, roleName, roleDesc });
      console.log(res);
      this.getRoles();
      this.dialogVisible1 = false;
    },
    // 分配权限
    async RoleDesc(row) {
      this.currteId = row.id;
      console.log(this.currteId);
      this.dialogVisible2 = true;
      let res = await getrights("tree");
      console.log(res);
      this.data1 = res.data;
      this.defaultChecked = [];
      this.roleDesc(row, this.defaultChecked);
    },
    roleDesc(row, arr) {
      if (!row.children) {
        arr.push(row.id);
      } else {
        row.children.forEach((v) => this.roleDesc(v, arr));
      }
    },
    // 角色授权确定
    async roleDescOk() {
      // 以 `,` 分割的权限 ID 列表（获取所有被选中、叶子节点的key和半选中节点的key, 包括 1，2，3级节点）
      const allChecked = this.$refs.refTree.getCheckedKeys();
      const halChecked = this.$refs.refTree.getHalfCheckedKeys();
      const resutCheck = [...allChecked, ...halChecked].join(",");
      let res = await editrights(this.currteId, resutCheck);
      console.log(res);
      this.dialogVisible2 = false;
      this.getRoles();
    },
    // 删除角色指定权限
  async delRights(roleId,rightId){
    let res =await deletrights(roleId,rightId)
    console.log(res);
    let index =this.tableData.findIndex((v)=>v.id==roleId)
    this.tableData[index].children=res.data
    
  }

  },
};
</script>
<style scoped lang='scss'>
.roles {
  box-sizing: border-box !important;
  .el-card {
    margin-top: 20px;
  }
  .el-table {
    margin-top: 10px;
  }
  .el-tag {
    margin: 5px;
  }
}
</style>
